<style>
	.flex-container {
		display: flex;
		align-items: center;
		position: relative;
	}

	.flex-container input {
		width: 140px;
		height: 34px;
		color: #333;
	}

	.flex-container p{
		color: #cfcfcf;
		font-size: 12px;
		margin-bottom: 6px;
	}

	.entry-style {
		box-shadow: 0 0 4px rgba(214,214,214,.75) inset;
		border-radius: 6px;
		border: 1px solid rgba(229, 229, 229, 1);
	}

	.head-container {
		padding: 10px 0px 14px;
		border-bottom: 1px solid #E3E3E5;
	}

	.search-text {
		background: rgba(249, 249, 249, 1);
		height: 34px;
		position: relative;
		width: 220px;
		border-radius: 4px;
	}

	.search-text span {
		position: absolute;
		left: 8px;
		top: 0;
		line-height: 34px;
	}

	.search-text input {
		width: 100%;
		height: 100%;
		background: none;
		border: 0;
		text-indent: 25px;
	}

	.global_ipt_text {
		width: 220px;
	}

	input {
		border: none;
		border-radius: 4px;
	}

	.house-sharing-text span {
		background: rgba(249, 249, 249, 1);
		box-shadow: none;
		border: 0;
		color: #666;
	}

	.newAdd .house-sharing-text span {
		border-radius: 6px;
		border: 1px solid rgba(229, 229, 229, 1);
	}

	.show-hide-term {
		width: 59px;
		height: 30px;
		line-height: 30px;
		color: rgba(244, 174, 71, 1);
		margin: 20px 0 0 35px;
		background: rgba(244, 174, 71, 0.3);
		border-radius: 4px;
		text-align: right;
		padding-right: 5px;
		position: absolute;
		right: 0;
		top: 0
	}

	.mark-yuce {
		width: 100%;
		height: 100%;
		position: fixed;
		left: 0;
		top: 0;
		z-index: 999;
		background-color: rgba(0, 0, 0, 0.5);
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.yuce-contains {
		width: 615px;
		background-color: #fff;
		border-radius: 4px;
		position: relative;
		box-shadow: 0 0 18px rgba(80,80,80,.75);
	}

	.yuce-contains .title {
		line-height: 45px;
		text-align: center;
		height: 45px;
	}

	.yuce-contains .close {
		position: absolute;
		right: 0;
		top: 0;
		width: 45px;
		height: 45px;
		text-align: center;
		line-height: 45px;
	}

	.yuce-orge {
		background-color: #f2f2f2;
		padding-bottom: 15px;
		padding-left:30px;
		display: flex;
		flex-direction: column;
	}

	.orge-footer {
		padding: 8px 0;
	}

	.select-yuce {
		position: absolute;
		right: 141px;
		top: 0;
		width: 120px;
	}

	.footer-template {
		position: fixed;
		bottom: 10px;
	}

	.center-dy {
		justify-content: center;
		align-items: center;
	}

	.pos-center {
		position: absolute;
		left: 0;
		top: 0;
		right: 0;
		bottom: 0;
		text-align: center;
	}

	.detection {
		width: 160px;
		height: 46px;
		line-height: 46px;
		border-radius: 23px;
		margin: 20px 0;
		display: block;
		background-color: #fff;
		box-shadow: 0px 0px 10px 0px rgba(224, 228, 255, 1);
	}

	.title-S {
		display: inline-block;
		width: 70px;
	}

	textarea {
		background: rgba(255, 255, 255, 1);
		box-shadow: 0 0 4px rgba(214,214,214,.75) inset;
		border-radius: 6px;
		border: 1px solid rgba(229, 229, 229, 1);
		padding: 8px;
		color: #333;
	}

	.unit-text {
		position: absolute;
		top: 7px;
		right: -18px;
	}

	.block {
		width: 700px;
		height: 1px;
		background: rgba(232, 232, 232, 1);
		margin-top: 10px;
	}

	.feedback-ok {
		margin: 30px 0 20px 0;
		color: #476799;
		cursor: pointer;
	}

	.feedback-ok span {
		display: inline-block;
		width: 1px;
		height: 12px;
		background: #AAAAAA;
		margin: 0 5px;
	}
	.box-i-shadow{
		box-shadow: 0 0 4px rgba(214,214,214,.75) inset;
	}
	.hl-date-icon::before {
    top: 0;
    right: 0;
	}
</style>
<section class="pl-24 pr-24" id="turnoverManagement">
	<hl-page-header title="营业额管理">
		<hl-button type="outline" @on-click="importExcl" v-if="permissions.indexOf('c310') > -1">批量导入</hl-button>
		<hl-button type="outline" @on-click="newAdd" v-if="permissions.indexOf('c309') > -1">新建营业额</hl-button>
	</hl-page-header>
	<!-- 搜索区 -->
	<div class="clearfix mt-10 search-container-house border-b pb-10 relative">
		<div class="flex-container">
			<div class="mr-10">
				<p>信息检索</p>
				<div class="global_search">
					<span class="icon-Gm-search"></span>
					<input
						v-model="keyword"
						autocomplete="off"
						type="text"
						class="global_ipt_text"
						placeholder="客户名称/简称/联系人/联系电话"
						style="width:220px"
					 />
				</div>
			</div>

			<div class="mr-10">
				<p>营业时间</p>
				<div class="clearfix">
					<div class="pull-left">
						<web-calendar width="140" v-model="turnover_date_begin" tips="起始时间"></web-calendar>
					</div>
					<div class="pull-left line-height-34 color-999 plr-12">-</div>
					<div class="pull-left">
						<web-calendar width="140" v-model="turnover_date_end" tips="截止时间"></web-calendar>
					</div>
				</div>
			</div>
			<div class="mr-10" v-show="isExtenseFlag">
				<p>客户名称</p>
				<hl-select :data="customerList" v-model="customer_id_arr" :width="140" @on-change="selectCustomerId"></hl-select>
			</div>
			<div class="mr-10" v-show="isExtenseFlag">
				<p>合同信息 </p>
				<hl-select :data="contractList" v-model="contract_id_arr" :width="140" @on-change="selectContractId"></hl-select>
			</div>
			<div style="padding-top:18px;" v-if="!isExtenseFlag">
				<hl-button @on-click="search" size="mini">查询</hl-button>
				<hl-button @on-click="reset" size="mini">重置</hl-button>
			</div>
		</div>

		<div class="flex-container" v-show="isExtenseFlag" style="margin-top:10px">
			<div class="mr-10">
				<p>项目 </p>
				<hl-select :data="projectList_s" v-model="projectId" :width="220" @on-change="newProjectClick"></hl-select>
			</div>
			<div class="mr-10">
				<p>组合</p>
				<hl-cascader :selected="selectedGroupData" :width="220" :primary-data="groupOneData" :secondary-data="groupTwoData" :tertiary-data="groupThreeData" @on-primary-change="selectOneGroup" @on-secondary-change="selectTwoGroup" @on-tertiary-change="selectThreeGroup"></hl-cascader>
			</div>
			<div class="mr-10">
				<p>楼栋 </p>
				<hl-select :data="buildingList_s" v-model="buildingId" :width="140" @on-change="newBuildingClick"></hl-select>
			</div>

			<div class="mr-10">
				<p>楼层 </p>
				<hl-select :data="floorList_s" v-model="floorId" :width="140" @on-change="newFloorClick"></hl-select>
			</div>

			<div class="mr-10">
				<p>单元 </p>
				<hl-select :data="unitList_s" v-model="unitId" :width="140" @on-change="newUnitClick"></hl-select>
			</div>
		</div>

		<div class="flex-container" v-show="isExtenseFlag" style="margin-top:10px">
			<div style="padding-top:18px;">
				<hl-button @on-click="search" size="mini">查询</hl-button>
				<hl-button @on-click="reset" size="mini">重置</hl-button>
			</div>
		</div>

		<div class="global_open_sign" @click="openSearch">
			<span v-if="!isExtenseFlag">更多筛选项</span>
			<span v-if="isExtenseFlag">收起筛选项</span>
		</div>
	</div>
	<!-- 筛选区 -->
	<div class="global_screening_container">
		<hl-checkbox-button :data="listMenu" v-model="selectedListMenuCode" @on-click="selectMenuList" merge></hl-checkbox-button>
		<span class="global_refresh_icon icon-uniE94B" @click="resetStatus"></span>
	</div>
	<!--流式布局表格-->
	<section class="fixed-config-table-container global_table" style="border:1px solid #E5E5E5;margin: 0;"
		@mouseenter="showScroll" @mouseleave="hideScroll">
		<!-- 内容表格 -->
		<div class="fixed-config-table-wrap" :class="{'config-table-scroll':isScroll}">
			<div :style="tbTitleWidth">
				<div class="config-table-title-wrap dy-flex">
					<!-- //完整 -->
					<div style="padding:0px;" class="config-table-title-item global_table_title" v-if="configType == 'WZ'"
						@click=" sortBySTTime(item)" :class="{'dy-fx-1':item.name === '序','dy-fx-2':item.name !== '序'}"
						v-for="(item,index) in headArr">
						<span>{{ item.name }}</span>
						<span v-if="dateTimeUpdate.indexOf(item.value) > -1 && indexTime < 1"
							v-for="(time,indexTime) in dateTimeUpdate"
							:class="{'icon-Gm-sort-default': isActiveCode != item.value, 'icon-Gm-sort-ascending': isActiveCode == item.value && orders == 'ASC', 'icon-Gm-sort-descending': isActiveCode == item.value && orders == 'DESC'}">
							<span class="path1"></span><i class="path2"></i>
						</span>
					</div>
					<!-- //简单 -->
					<div style="padding:0px;" class="config-table-title-item global_table_title"
						v-if="configType == 'JD' && item.baseFlag == 'Y'" @click=" sortBySTTime(item)"
						:class="{'dy-fx-1':item.name === '序','dy-fx-2':item.name !== '序'}" v-for="(item,index) in headArr">
						<span>{{ item.name }}</span>
						<span v-if="dateTimeUpdate.indexOf(item.value) > -1 && indexTime < 1"
							v-for="(time,indexTime) in dateTimeUpdate"
							:class="{'icon-Gm-sort-default': isActiveCode != item.value, 'icon-Gm-sort-ascending': isActiveCode == item.value && orders == 'ASC', 'icon-Gm-sort-descending': isActiveCode == item.value && orders == 'DESC'}">
							<span class="path1"></span><i class="path2"></i>
						</span>
					</div>
					<!-- //配置 -->
					<div style="padding:0px;" class="config-table-title-item global_table_title"
						v-if="configType == 'PZ' && item.customShowFlag == 'Y'" @click=" sortBySTTime(item)"
						:class="{'dy-fx-1':item.name === '序','dy-fx-2':item.name !== '序'}" v-for="(item,index) in headArr">
						<span>{{ item.customDisplayName ? item.customDisplayName : item.name }}</span>
						<span v-if="dateTimeUpdate.indexOf(item.value) > -1 && indexTime < 1"
							v-for="(time,indexTime) in dateTimeUpdate"
							:class="{'icon-Gm-sort-default': isActiveCode != item.value, 'icon-Gm-sort-ascending': isActiveCode == item.value && orders == 'ASC', 'icon-Gm-sort-descending': isActiveCode == item.value && orders == 'DESC'}">
							<span class="path1"></span><i class="path2"></i>
						</span>
					</div>
				</div>

				<div class="config-table-content-wrap">
					<ul class="dy-flex global_table_item" v-for="(item,index) in listObj.turnoverInfoListPageVO">
						<!-- //完整 -->
						<li :class="{'dy-fx-1':item1.name === '序','dy-fx-2':item1.name !== '序'}" v-if="configType == 'WZ'"
							v-for="(item1,index1) in headArr" :title="(item1.value == 'projectName' || item1.value == 'customerName' || item1.value == 'customerShortName' || item1.value == 'contractInfo')?item[item1.value]:''">
							<span>{{item[item1.value] | formatUndefined}}</span>
						</li>
						<!-- //简单 -->
						<li :class="{'dy-fx-1':item1.name === '序','dy-fx-2':item1.name !== '序'}"
							v-if="configType == 'JD' && item1.baseFlag == 'Y'" v-for="(item1,index1) in headArr" :title="(item1.value == 'projectName' || item1.value == 'customerName' || item1.value == 'customerShortName' || item1.value == 'contractInfo')?item[item1.value]:''">
							<span>{{item[item1.value] | formatUndefined}}</span>
						</li>
						<!-- //配置 -->
						<li :class="{'dy-fx-1':item1.name === '序','dy-fx-2':item1.name !== '序'}"
							v-if="configType == 'PZ' && item1.customShowFlag == 'Y'" v-for="(item1,index1) in headArr" :title="(item1.value == 'projectName' || item1.value == 'customerName' || item1.value == 'customerShortName' || item1.value == 'contractInfo')?item[item1.value]:''">
							<span>{{item[item1.value] | formatUndefined}}</span>
						</li>
					</ul>
				</div>
			</div>
		</div>
		<!-- 操作 -->
		<div class="config-table-operate-wrap">
			<div class="title" style="backgroundColor:#F0F2FF;height:40px;">
				<div class="name">操作</div>
				<div class="extension-wrap">
					<i class="icon-predict-more extension-icon"></i>
				</div>
				<ul class="table-type-wrap">
					<li @click="selectTableType('JD')" :class="{'active': configType == 'JD' }">简单表格</li>
					<li @click="selectTableType('WZ')" :class="{'active': configType == 'WZ' }">完整表格</li>
					<li @click="selectTableType('PZ')" :class="{'active': configType == 'PZ' }">自定义表格<span
							class="icon icon-Gm-edit" @click="showTableLayer"></span></li>
				</ul>
			</div>
			<ul class="button-group">
				<li v-for="(item,index) in listObj.turnoverInfoListPageVO" class="global_table_item">
					<a v-if="item.statusCode == 'WIPT'" @click="EntryBut(item)" v-show="permissions.indexOf('c311') > -1">录入</a>
					<a v-if="item.statusCode == 'YIPT'" @click="changeBut(item)">修改</a>
					<a @click="goTodetail(item.id)">详情</a>
				</li>
			</ul>
		</div>
	</section>
	<!-- end -->

	<!-- 自定义列表项弹出层 -->
	<div class="pop box-o-shadow config-table-layer" v-show="isShowTableLayer">
		<div class="head-pop font-16"><span>自定义列</span>
			<button class="fw-close absolute close" type="button" @click="closeTableLayer">×</button>
		</div>
		<div class="content-pop">
			<div class="content text-center">
				<ul class="title-wrap">
					<li class="dy-fx-1 text-left">名称</li>
					<li class="dy-fx-2">自定义名称</li>
					<li class="dy-fx-1">状态</li>
				</ul>
				<div class="ctx-wrap" id="sortableTable">
					<ul :class="{ 'active': item.isActive == 'Y' }" v-for="(item,index) in sortTableTitle"
						@mouseenter="showhighLightTitleItem(item,index)" @mouseleave="removehighLightTitleItem(item,index)">
						<li class="sort-sign" :class="{ 'active':item.isActive == 'Y' }">排序</li>
						<li class="dy-fx-1 name">{{item.name}}</li>
						<li class="dy-fx-2">
							<input type="text" class="form-control" v-model="item.customDisplayName">
						</li>
						<li class="dy-fx-1 ">
							<span class="show-icon "
								:class="{'icon-Nav-contract-choice':item.customShowFlag == 'Y' , 'icon-uncheck':item.customShowFlag == 'N' }"
								@click="selectedTitleItem(index)">显示</span>
							<span class="hide-icon "
								:class="{'icon-Nav-contract-choice':item.customShowFlag == 'N' , 'icon-uncheck':item.customShowFlag == 'Y' }"
								@click="cancelSelectedTitleItem(index)">隐藏</span>
						</li>
					</ul>

				</div>
			</div>
		</div>
		<div class="fw-button">
			<hl-button type="primary"  @on-click="confirmSubmitTable">确定</hl-button>
			<hl-button type="outline"  @on-click="closeTableLayer">取消</hl-button>
		</div>
	</div>

	<!--遮罩-->
	<div class="backdrop" v-if="isShowTableLayer"></div>
	<!-- end -->
	<!-- 分页 -->
	<div class="user-page ptb-10 clearfix">
		<div class="pull-left user-page-num">
			<span class="font-14">共<i>{{totalCount}}</i>条记录</span>
			<span>每页<hl-select :data="pageLimits" v-model="limit" width="80" @on-change="setMoreNum"></hl-select>条</span>
		</div>
		<div class="pull-right">
			 <hl-pagination v-model="currentPage" :total="totalPage" @change="getTurnoverData"></hl-pagination>
		</div>
	</div>

	<!-- 新增 -->
	<hl-dialog :visible="addFlag" :width="800" title="新增营业额" @on-close="addFlag = false">
		<div>
			<div class="flex-container">
				<span class="title-S">项目：</span>
				<hl-select type="primary" placeholder="请选择项目" :data="projectList_n" v-model="projectId" :width="220" @on-change="newProjectClickn" style="marginRight:50px;"></hl-select>
				<span class="title-S" style="width:50px;">组合：</span>
				<hl-cascader type="primary" placeholder="请选择组合" :selected="selectedGroupData" :width="220" :primary-data="groupOneData" :secondary-data="groupTwoData" :tertiary-data="groupThreeData" @on-primary-change="selectOneGroup" @on-secondary-change="selectTwoGroup" @on-tertiary-change="selectThreeGroup"></hl-cascader>
			</div>

			<div class="flex-container" style="margin-top:14px;">
				<span class="title-S">资源选择：</span>
				<hl-select type="primary" placeholder="请选择楼栋" :data="buildingList_n" class="mr-16" v-model="buildingId" width="140" @on-change="newBuildingClickn"></hl-select>
				<hl-select type="primary" placeholder="请选择楼层" :data="floorList_n" class="mr-16" v-model="floorId" width="140" @on-change="newFloorClickn"></hl-select>
				<hl-select type="primary" placeholder="请选择单元" :data="unitList_n" v-model="unitId" width="140" @on-change="newUnitClickn"></hl-select>
			</div>

			<div class="flex-container" style="margin-top:14px;width: 700px;">
				<span class="title-S">营业日期：</span>
				<div class="flex-container">
					<div class="calendar-text pull-left entry-style" style="width:240px;margin-right: 80px;">
						<web-calendar type="primary" v-model="turnover_date" tips="起始时间"></web-calendar>
					</div>
				</div>
			</div>

			<div class="flex-container feedback-ok" v-if="this.project_id_n && this.building_id_n && this.floor_id_n && this.unit_id_n && this.turnover_date && this.dateaccoard && feedbackData.messageInfo == 'OK'">
				<div @click="throughFunc(feedbackData.customerInfoPage.customerId,'customer')">
					{{feedbackData.customerInfoPage.customerName}}</div>
				<span></span>
				<div @click="throughFunc(feedbackData.contractInfoPage.contractId,'contract')">
					{{feedbackData.contractInfoPage.contractInfo}}</div>
			</div>
			<div style="margin:30px 0 10px 0;text-align: center" v-if="this.project_id_n && this.building_id_n && this.floor_id_n && this.unit_id_n && this.turnover_date && this.dateaccoard && feedbackData.messageInfo == 'N'">
				<div style="color:#666">营业日期内单元不存在有效客户</div>
				<div style="color:#CECECE">（请继续添加）</div>
			</div>
			<div class="flex-container" style="margin:30px 0 20px 0;color:#666" v-if="this.project_id_n && this.building_id_n && this.floor_id_n && this.unit_id_n && this.turnover_date && this.dateaccoard && feedbackData.messageInfo == 'Y'">
				当前新增营业额与已提交抽成营业额重复
			</div>
			<div class="block"></div>
			<div class="flex-container validate"  style="margin-top:14px;padding-bottom:14px;width: 700px;">
				<span class="title-S">金额：</span>
				<div style="width: 240px;margin-right:0" class="flex-container relative">
					<input type="number" class="form-control ct-number-ipt" style="width:240px" v-model="turnover_amount_n"  @input="turnover_amount_n = turnover_amount_n.slice(0,12)" >
					<span class="unit-text">元</span>
				</div>
			</div>
			<div class="flex-container" style="margin-top:14px;align-items: flex-start">
				<span class="title-S">备注：</span>
				<textarea placeholder="非必填" class="form-control contract-memo-textarea" style="width: 630px;height: 170px;" v-model="memo_n"></textarea>
			</div>
		</div>
		<div slot="footer">
			<hl-button type="primary" :style="{opacity:feedbackData.messageInfo == 'Y'?'0.6':''}" @on-click="sureAddTurnover">确认添加</hl-button>
			<hl-button type="outline" @on-click="addFlag = false">取消</hl-button>
		</div>
	</hl-dialog>

	<!-- 录入/修改 -->
	<div class="mark-yuce newAdd" v-if="entryFlag">
		<div class="yuce-contains" style="width:500px;">
			<div class="title">{{entryText}}营业额</div>
			<div class="close" @click="entryFlag = false">x</div>
			<div class="yuce-orge" style="padding-top:26px">
				<div class="flex-container">
					<span class="title-S">金额：</span>
					<div style="width: 240px;margin-right:0" class="flex-container relative">
						<!-- <input type="number" style="width:240px" class="entry-style" v-model="entryTurnover.turnover_amount" @input="entryTurnover.turnover_amount = entryTurnover.turnover_amount.slice(0,12)"> -->
						<input type="number" style="width:240px"  class="form-control ct-number-ipt" v-model="entryTurnover.turnover_amount"  @input="entryTurnover.turnover_amount = entryTurnover.turnover_amount.slice(0,12)">
						<span class="unit-text">元</span>
					</div>
				</div>
				<div class="flex-container" style="margin-top:12px;align-items: flex-start">
					<span class="title-S">备注：</span>
					<div style="width: 240px;margin-right:0" class="flex-container relative">
						<textarea placeholder="非必填" class="form-control contract-memo-textarea" style="width: 260px;height: 90px;" v-model="entryTurnover.memo"></textarea>
					</div>
				</div>
			</div>
			<div class="orge-footer text-center">
				<hl-button type="primary" @on-click="sureEntryTurnover">确认添加</hl-button>
				<hl-button type="outline" @on-click="entryFlag = false">取消</hl-button>
			</div>
		</div>
	</div>

	<!-- 导入 -->
	<hl-dialog :visible="importFlag"  :width="500" title="导入营业额" @on-close="importExclClose">
		<div>
			<div class="dy-flex line-height-34 pt-15">
				<div class="dy-fx-1">
					<input type="text" class="filename-i form-control bg-fff inline" readonly
						style="vertical-align: middle;width:308px;" id="exclName">
					<hl-button style="vertical-align: middle;" @on-click="downloadxslc">上传</hl-button>
				</div>
			</div>
			<div class="mt-5" style="width: 100%;padding-left: 25px;">
				<a href="http://file.1hello.cn/excel/导入营业额模板.xlsx" download="导入营业额模板">下载模板</a>
			</div>
			<div class="text-center dy-flex center-dy">
				<div class="pt-15" v-if="detectionBtn">
					<a class="detection" @click="detectionXslx">检测</a>
				</div>
				<div class="pt-15" v-if="detection">
					<div class="typing_loader"></div>
					数据校验中
				</div>
				<div class="pt-15" v-if="notThrough">
					<div class="icon-Gm-delete-2 pb-10" style="font-size: 24px; color:#fe6e63;"></div>
					检测未通过！
					<p v-if="isShowDownload"><a :href="srcUrl">下载报告</a></p>
				</div>
				<div class="pt-15" v-if="through">
					<div class="icon-Nav-dispose-complete pb-10" style="font-size: 24px; color:#73c676;"></div>
					检测通过！
				</div>
			</div>
		</div>

		<div slot="footer">
			<div v-if="through">
				<hl-button type="primary" @on-click="submibXslc">确认上传</hl-button>
				<hl-button type="outline" @on-click="importExclClose">取消</hl-button>
			</div>

			<div v-if="(!notThrough || notThrough) && !through" style="opacity: 0.5;">
				<hl-button type="primary">确认上传</hl-button>
				<hl-button type="outline" @on-click="importExclClose">取消</hl-button>
			</div>
		</div>
	</hl-dialog>

	<div class="upload-filess"></div>
</section>

<script src="modules/contract/scripts/turnover_management.js" charset="utf-8"></script>
<style>
	/*Typing Loader*/

	.typing_loader {
		width: 6px;
		height: 6px;
		border-radius: 50%;
		-webkit-animation: typing 1s linear infinite alternate;
		-moz-animation: Typing 1s linear infinite alternate;
		-ms-animation: Typing 1s linear infinite alternate;
		animation: typing 1s linear infinite alternate;
		margin: 8px auto;
		position: relative;
		left: -12px;
	}

	@-webkit-keyframes typing {
		0% {
			background-color: rgba(0, 0, 0, 1);
			box-shadow: 12px 0px 0px 0px rgba(0, 0, 0, 0.2), 24px 0px 0px 0px rgba(0, 0, 0, 0.2);
		}

		25% {
			background-color: rgba(0, 0, 0, 0.4);
			box-shadow: 12px 0px 0px 0px rgba(0, 0, 0, 2), 24px 0px 0px 0px rgba(0, 0, 0, 0.2);
		}

		75% {
			background-color: rgba(0, 0, 0, 0.4);
			box-shadow: 12px 0px 0px 0px rgba(0, 0, 0, 0.2), 24px 0px 0px 0px rgba(0, 0, 0, 1);
		}
	}

	@-moz-keyframes typing {
		0% {
			background-color: rgba(0, 0, 0, 1);
			box-shadow: 12px 0px 0px 0px rgba(0, 0, 0, 0.2), 24px 0px 0px 0px rgba(0, 0, 0, 0.2);
		}

		25% {
			background-color: rgba(0, 0, 0, 0.4);
			box-shadow: 12px 0px 0px 0px rgba(0, 0, 0, 2), 24px 0px 0px 0px rgba(0, 0, 0, 0.2);
		}

		75% {
			background-color: rgba(0, 0, 0, 0.4);
			box-shadow: 12px 0px 0px 0px rgba(0, 0, 0, 0.2), 24px 0px 0px 0px rgba(0, 0, 0, 1);
		}
	}

	@keyframes typing {
		0% {
			background-color: rgba(0, 0, 0, 1);
			box-shadow: 12px 0px 0px 0px rgba(0, 0, 0, 0.2), 24px 0px 0px 0px rgba(0, 0, 0, 0.2);
		}

		25% {
			background-color: rgba(0, 0, 0, 0.4);
			box-shadow: 12px 0px 0px 0px rgba(0, 0, 0, 2), 24px 0px 0px 0px rgba(0, 0, 0, 0.2);
		}

		75% {
			background-color: rgba(0, 0, 0, 0.4);
			box-shadow: 12px 0px 0px 0px rgba(0, 0, 0, 0.2), 24px 0px 0px 0px rgba(0, 0, 0, 1);
		}
	}

	::-webkit-input-placeholder {
		color: #ccc;
	}

	::-moz-placeholder {
		color: #ccc;
	}

	:-ms-input-placeholder {
		color: #ccc;
	}

	input::-webkit-outer-spin-button,
	input::-webkit-inner-spin-button {
		-webkit-appearance: none;
	}

	input[type="number"] {
		-moz-appearance: textfield;
	}
</style>
